<!-- <template>
	<view class="order-detail">
		<view class="header">
			<text>{{records.userAddrDto.receiver}}</text> <text>{{records.userAddrDto.mobile}}</text>
			<view class="">
				{{records.userAddrDto.province}}{{records.userAddrDto.city}}{{records.userAddrDto.area}}{{records.userAddrDto.area}}{{records.userAddrDto.addr}}
			</view>
		</view>
		<view class="main">
			
		</view>
		<view class="dd">
			
		</view>
		<view class="fs">
			
		</view>
		<view class="jg">
			
		</view>
	</view>
</template>

<script>
	var http = require("../../utils/http");
	export default {
		data() {
			return {
				records:{
					userAddrDto:{
					}
				},
				
			}
		},
		onLoad(option){
			http.request({
				url: "/p/myOrder/orderDetail",
				method: "get",
				data: {
					orderNumber:option.orderNum
				},
				callBack: res => {
					this.records = res
					console.log(this.records);
					// console.log(this.swiperList, "232431");
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style>

</style -->>


<template>
	<view>
		<!--1  -->
		<view class="" style="padding: 10px;background: white;">
			<view class="" style="">
				<text style="margin-right: 15px;font-weight: 400;">{{list.userAddrDto.receiver}}</text>
			</view>
			<view class="" style="font-size: 12px;color: #999;">
				{{list.userAddrDto.province}}{{list.userAddrDto.city}}{{list.userAddrDto.area}}{{list.userAddrDto.addr}}
			</view>
		</view>
		<!--1  -->
		<!-- 2 -->
		<view @click="handleTZ(list.orderItemDtos[0].prodId)" class=""
			style="margin: 10px 0; padding: 10px; background-color:white;display: flex;" v-if="list.orderItemDtos && list.orderItemDtos.length > 0">
			<view class="" style="width: 28%;height: 80px; ">
				<image style="width: 85%;height: 100%;;" :src="list.orderItemDtos[0].pic"></image>
			</view>
			<view class="" style="width: 72%;">
				<view class="" style="font-size: 12px;">
					{{list.orderItemDtos[0].prodName}}
				</view>
				<view class="" style="font-size: 10px;margin: 5px 0; color: #999;">
					{{list.orderItemDtos[0].skuName}}
				</view>
				<view class="" style="margin-top: 20px; font-size: 12px;display: flex;justify-content: space-between;">
					<view class="">
						￥<text style="font-size: 16px;">{{list.orderItemDtos[0].productTotalAmount}}</text>.00
					</view>
					<view class="" style="font-size: 15px; color: #999;margin-right: 5px;">

					</view>
				</view>
			</view>
		</view>
		<!-- 2 -->
		<!--  3-->
		<view class="" style="padding: 10px;background: white;">
			<view class="" style="margin:10px 0;">
				<text style="color: #999; margin-right: 15px;font-weight: 200;">订单编号:</text>{{ids}}
			</view>
			<view class="" style="margin:10px 0;">
				<text style="color: #999; margin-right: 15px;font-weight: 200;">下单时间:</text>{{list.createTime}}
			</view>


		</view>
		<!-- 3 -->
		<!--  4-->
		<view class="" style="padding: 10px;background: white;margin-top: 2px;margin-bottom: 8px;">
			<view class="" style="margin:10px 0;">
				<text style="color: #999; margin-right: 15px;font-weight: 200;">支付方式:</text>微信支付
			</view>
			<view class="" style="margin:10px 0;">
				<text style="color: #999; margin-right: 15px;font-weight: 200;">配送方式:</text>普通配送
			</view>
			<view class="" style="margin:10px 0;">
				<text style="color: #999; margin-right: 15px;font-weight: 200;">订单备注:</text>{{list.remarks}}
			</view>


		</view>
		<!-- 4 -->
		<!--  4-->
		<view class="" style=" padding: 10px;background: white;margin-bottom: 10px;">
			<view class="" style="margin:10px 0;display: flex;justify-content: space-between;">
				<view class="" style="color: #999; margin-right: 15px;font-weight: 200;">
					订单总额：
				</view>
				<view class="" style="color: red;">
					￥<text style="font-size: 20px;">{{list.total}}</text>.00
				</view>
			</view>
			<view class="" style="margin:10px 0;display: flex;justify-content: space-between;">
				<view class="" style="color: #999; margin-right: 15px;font-weight: 200;">
					运费： </view>
				<view class="" style="color: red;">
					￥<text style="font-size: 20px;">{{list.transfee}}</text>.00
				</view>
			</view>
			<view class="" style="margin:10px 0;display: flex;justify-content: space-between;">
				<view class="" style="color: #999; margin-right: 15px;font-weight: 200;">
					优惠卷：
				</view>
				<view class="" style="color: red;">
					-￥<text style="font-size: 20px;">{{list.reduceAmount}}</text>.00
				</view>
			</view>

			<view class="" style="border-bottom: 1px solid #f1f1f1;">

			</view>
			<view class="" style="color: red; width: 100%;padding: 20px 5px;text-align: right;">
				实付款： ￥<text style="font-size: 20px;">{{list.total}}</text>.00
			</view>
		</view>
		<!-- 4 -->
	</view>
</template>

<script>
	var http = require("../../utils/http");
	export default {
		data() {
			return {
				list: {
					userAddrDto: {},
					orderItemDtos: [] // 初始化为一个空数组
				},
				ids: '',
			}
		},
		onLoad(option) {
			console.log(option.orderNum, "接收");
			// 调用接口传递参数
			this.ids = option.orderNum
			this.handleClick(option.orderNum)

		},
		methods: {
			handleTZ(row) {
				console.log(row, "跳转");
				// 跳转非tabar页面
				uni.navigateTo({
					// 跳转传参
					url: `/pages/prod/prod?prodid=${row}`
				})
			},

			// 默认调用
			handleClick(id) {
				http.request({
					url: "/p/myOrder/orderDetail",
					method: "get",
					data: {
						orderNumber: id,
					},
					callBack: res => {
						// console.log(res, "默认调用");
							this.list = res;
					},
				})
			},
			// 默认调用
		}
	}
</script>

<style>

</style>